<template>
	<view class="full box relative sign-wrap flex column" :style="{'--padding-top':heightValue}">
		<view class="header w-100">
			<view class="navbar-wrap">
				<image src="../static/icon/left.png" mode="aspectFill" class="chevron" @click="backHandle"></image>
				<view class="nav-title">
					<text>签到</text>
				</view>
			</view>
			<view class="point-wrap">
				<view class="point-value">
					<text class="value">{{ pointValue }}</text>
					<text class="prefix">积分</text>
				</view>
				<view class="point-time">
					<text>有效期：2022.12.12-2023.12-11</text>
				</view>
			</view>
		</view>
		<view class="page-inner relative flex column">
			<view class="sign-in-header w-100">
				<text class="day-text">本月连续签到</text>
				<text class="day-value">{{ dayCount }}</text>
				<text class="day-text">天</text>
			</view>
			<view class="sign-in-day-list w-100">
				<view class="sign-in-day-item" v-for="(item,index) in signInEnum" :key="index"
					:class="{active: item.active}">
					<view class="sign-day-icon">
						<view class="sign-day-icon-inner">
							<view class="sign-day-icon-inner-text">
								<text>{{ item.value }}</text>
							</view>
						</view>
					</view>
					<view class="sign-day-value">
						<text>{{ item.day }}</text>
					</view>
				</view>
			</view>
			<view class="sign-in-btn w-100">
				<u-button text="立即签到" @click="signInHandle" />
			</view>
			<view class="point-shop-label w-100">
				<text>积分商城</text>
			</view>
			<view class="relative flex-1 box w-100 point-shop-inner">
				<view class="absolute inset" style="z-index: 10;">
					<scroll-view class="full" scroll-y @scrolltolower="initShopData(false)">
						<view class="point-shop-list">
							<view class="shop-item" v-for="(item,i) in list" :key="i">
								<view class="shop-image">
									<image :src="item.image" class="full" mode="aspectFill"></image>
								</view>
								<view class="shop-name">
									<text>{{ item.title }}</text>
								</view>
								<view class="shop-money">
									<view class="money-number">
										<text>{{ item.score }}</text>
									</view>
									<view class="money-label">
										<text>积分</text>
									</view>
								</view>
								<view class="shop-confirm-btn" @click="confirmHandle(item.id)">
									<text>兑换</text>
								</view>
							</view>
						</view>
						<view class="empty-wrapper" v-if="isEmpty">
							<u-empty text="暂无数据" :icon="sourceUrl + '/data-empty.png'" />
						</view>
						<view class="loadmore-wrapper">
							<u-loadmore icon-color="#3c9cff" :status="status" loading-icon="semicircle" />
						</view>
					</scroll-view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { LOAD_MORE } from '@/constant/index.js'
	const CACHE_KEY = 'lv_signin_config'
	export default {
		created() {
			this.initData()
			this.initShopData()
		},
		methods: {
			async initShopData(clear = false) {
				if (clear) {
					this.page = 1
					this.status = LOAD_MORE.LOADING
					this.isEmpty = false
					this.list = []
				}
				if (this.status === LOAD_MORE.NO_MORE) return
				if (this.status !== LOAD_MORE.LOADING) this.status = LOAD_MORE.LOADING
				const resp = await this.$request({
					url: "/SignIn/getProductCoupon",
					data: { page: this.page, list_rows: this.pageSize },
				})
				await this.$delay(300)
				const { code, data, msg } = resp
				if (code !== 1) {
					this.status = LOAD_MORE.NO_MORE
					return this.$toast({ title: msg })
				}
				const { current_page, total, per_page, data: list } = data
				if (!!list && list.length) {
					this.list.push(...list)
				}
				this.isEmpty = this.list.length === 0
				const hasMore = current_page * per_page < total
				if (hasMore) {
					this.page += 1
					return this.status = LOAD_MORE.LOAD_MORE
				}
				this.status = LOAD_MORE.NO_MORE
			},
			setConfigCache(data) {
				uni.setStorage({
					key: CACHE_KEY,
					data,
				})
			},
			getConfigCache() {
				const value = uni.getStorageSync(CACHE_KEY)
				if (!value || !Array.isArray(value)) return [10]
				return value
			},
			async signInHandle() {
				uni.showLoading({
					title: '正在签到',
					mask: true
				})
				const resp = await this.$request({
					url: "/SignIn/addSignIn",
				})
				uni.hideLoading()
				const { code, msg } = resp
				this.$toast({ title: msg })
				if (code !== 1) return
				this.initData()
				this.$store.dispatch('getUserinfo')
			},
			backHandle() {
				uni.navigateBack()
			},
			confirmHandle(id) {
				uni.showModal({
					title: '提示',
					content: '您确定要兑换吗?',
					success: async ev => {
						if (ev.cancel) return
						const resp = await this.$request({
							url: "/SignIn/convertCoupon",
							data: { id },
						})
						console.log(resp, 'resp');
						const { code, msg } = resp
						this.$toast({ title: msg }, () => {
							if (code !== 1) return
							this.initShopData(true)
							this.initData()
						})
					}
				})
			},
			initConfig(config) {
				if (!config || !config.length) return
				const data = config.map(item => item.scale)
				this.config = data
				this.setConfigCache(data)
			},
			async initData() {
				uni.showLoading({
					title: '正在获取',
					mask: true
				})
				const resp = await this.$request({
					url: "/SignIn/getSignIn",
				})
				uni.hideLoading()
				const { code, data, msg } = resp
				if (code !== 1) return this.$toast({ title: msg }, () => {
					uni.navigateBack()
				})
				const {
					rule,
					score,
					sign_count,
					sign_moth,
					score_config,
				} = data
				this.monthCount = sign_moth
				this.dayCount = sign_count
				this.pointValue = score
				this.initConfig(score_config)

			},
		},
		computed: {
			signInEnum() {
				const { dayCount, config } = this
				const result = []
				const isOne = config.length === 1
				for (let i = 0; i < 5; i++) {
					const value = isOne ? config[0] : config[i]
					result.push({
						active: i < dayCount,
						day: `${i + 1}天`,
						value
					})
				}
				return result
			},
			heightValue() {
				let height = this.statusBarHeight_
				// #ifdef H5
				height = uni.upx2px(88) + 'px'
				// #endif
				return height
			}
		},
		data() {
			return {
				config: this.getConfigCache(),
				activeIndex: 0,
				rules: '',
				pointValue: 0,
				monthCount: 0,
				dayCount: 0,
				page: 1,
				list: [],
				status: LOAD_MORE.LOAD_MORE,
				isEmpty: false,
				pageSize: 15,
			};
		}
	}
</script>

<style lang="scss" scoped>
	.sign-wrap {
		background-color: #FFF;
		position: relative;
		padding: 360rpx 0 env(safe-area-inset-bottom);


		.page-inner {
			background-color: #FFF;
			border-radius: 32rpx 32rpx 0 0;
			z-index: 3;
			width: 100%;
			height: 100%;
			padding: 32rpx;
			box-sizing: border-box;

			.point-shop-inner {
				margin-top: 24rpx;

				.point-shop-list {
					display: grid;
					grid-template-columns: repeat(2, 1fr);
					gap: 24rpx 30rpx;

					.shop-item {
						width: 100%;
						padding: 24rpx;
						box-sizing: border-box;
						background: #F6F6F6;
						border-radius: 16rpx 16rpx 16rpx 16rpx;
						overflow: hidden;

						.shop-confirm-btn {
							margin-top: 16rpx;
							height: 60rpx;
							background: linear-gradient(135deg, #8BDCFF 0%, #E4FF68 100%);
							border-radius: 100rpx 100rpx 100rpx 100rpx;
							display: flex;
							align-items: center;
							justify-content: center;
							color: rgba(0, 0, 0, 0.9);
							font-size: 24rpx;
						}

						.shop-money {
							margin-top: 16rpx;
							display: flex;
							align-items: flex-end;

							.money-number {
								font-size: 40rpx;
								color: #FF3737;
								font-weight: bold;
								vertical-align: middle;
							}

							.money-label {
								font-size: 20rpx;
								color: #000000;
								margin-left: 4rpx;
								vertical-align: middle;
								padding-bottom: 4rpx;
							}
						}

						.shop-name {
							margin-top: 16rpx;
							height: 40rpx;
							font-size: 24rpx;
							color: #000000;
							font-weight: bold;
							line-height: 40rpx;
						}

						.shop-image {
							width: 280rpx;
							height: 212rpx;
						}
					}
				}
			}

			.point-shop-label {
				height: 44rpx;
				font-size: 28rpx;
				color: #000000;
				font-weight: bold;
				margin-top: 48rpx;
				line-height: 44rpx;
			}

			.sign-in-btn {
				margin-top: 32rpx;

				::v-deep button {
					height: 76rpx;
					background: linear-gradient(135deg, #8BDCFF 0%, #E4FF68 100%);
					border: none;
				}
			}

			.sign-in-day-list {
				margin-top: 32rpx;
				display: flex;
				align-items: center;
				flex-flow: row nowrap;
				justify-content: space-between;

				.sign-in-day-item {
					width: 112rpx;
					height: 136rpx;
					background: #F6F6F6;
					border-radius: 16rpx 16rpx 16rpx 16rpx;
					display: flex;
					align-items: center;
					flex-flow: column;
					justify-content: center;

					&.active {
						background-color: #8BDCFF;
					}

					.sign-day-value {
						margin-top: 16rpx;
						height: 32rpx;
						font-size: 20rpx;
						color: rgba(0, 0, 0, 0.6);
						line-height: 32rpx;
					}

					.sign-day-icon {
						width: 48rpx;
						height: 48rpx;
						background: #FDE496;
						padding: 6rpx;
						box-sizing: border-box;
						border-radius: 50%;
						overflow: hidden;

						.sign-day-icon-inner {
							width: 100%;
							height: 100%;
							background: #FFBF25;
							display: flex;
							align-items: center;
							justify-content: center;
							border-radius: 50%;
							overflow: hidden;

							.sign-day-icon-inner-text {
								color: #ffffff;
								font-size: 20rpx;
							}
						}
					}
				}
			}

			.sign-in-header {
				display: flex;
				align-items: center;

				.day-text {
					font-size: 28rpx;
					color: #000000;
					font-weight: bold;
				}

				.day-value {
					font-size: 38rpx;
					color: #FC6629;
					font-weight: bold;
					margin: 0 4rpx;
				}
			}
		}

		.header {
			background: linear-gradient(135deg, #8BDCFF 0%, #E4FF68 100%);
			height: 618rpx;
			width: 100%;
			box-sizing: border-box;
			padding-top: var(--padding-top);
			position: absolute;
			left: 0;
			right: 0;
			top: 0;


			.point-wrap {
				padding: 0 32rpx;

				.point-time {
					height: 40rpx;
					font-size: 24rpx;
					color: rgba(0, 0, 0, 0.6);
					line-height: 40rpx;
					margin-top: 16rpx;
				}

				.point-value {
					display: flex;
					align-items: flex-end;

					.value {
						height: 64rpx;
						font-size: 64rpx;
						font-weight: bold;
						color: rgba(0, 0, 0, 0.9);
						line-height: 64rpx;
					}

					.prefix {
						height: 44rpx;
						font-size: 28rpx;
						color: rgba(0, 0, 0, 0.9);
						line-height: 44rpx;
						margin-left: 8rpx;
					}
				}
			}

			.navbar-wrap {
				box-sizing: border-box;
				flex-flow: row nowrap;
				display: flex;
				align-items: center;
				padding: 20rpx 24rpx;
				justify-content: center;
				position: relative;

				.nav-title {
					height: 48rpx;
					font-size: 32rpx;
					color: rgba(0, 0, 0, 0.9);
					font-weight: bold;
					line-height: 48rpx;
				}

				.chevron {
					width: 48rpx;
					height: 48rpx;
					position: absolute;
					left: 24rpx;
					top: 50%;
					transform: translateY(-50%);
				}
			}

		}
	}
</style>